<template>
	<view  :data-theme='theme()' :class="theme() || ''">
		<!-- #ifdef APP-PLUS -->
    <header-bar></header-bar>
		<!-- #endif -->
    <view class="top-box">
      <view class="index-search-box index-search-box_re d-b-c" id="searchBox">
        <view class="index-search index-search_re t-c flex-1">
          <span class="icon iconfont icon-sousuo"></span>
          <input type="text" v-model="searchtxt" class="flex-1 ml10 f30 gray3"  placeholder-class="f24 gray6"
                 placeholder="搜索商圈" confirm-type="search" @confirm="searchBusinessList()" />
        </view>
      </view>
      <view style="height: 100rpx; line-height: 100rpx; background: #ffffff;">
        <navBar style="width: 740rpx;" :color='openCategory.color' :isFixedEnable="isFixed"  @currentIndex="setIndex" :navList="categoryList"></navBar>
      </view>
    </view>

    <view  :style="{ minHeight: isFixed ? '100vh' : 'auto' }">
      <view class="business-circles-container">
        <view class="business-circle" v-for="(circle, index) in business.list" :key="index">
          <swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500" class="swiper-container" @click="navToPage(circle)">
            <swiper-item v-for="(image, index) in circle.image" :key="index">
              <image :src="image.filePath" class="business-swiper-image" mode="aspectFill"></image>
            </swiper-item>
          </swiper>
          <view class="circle-name" @click="navToPage(circle)">{{ circle.businessName }}</view>
          <view class="tip">{{ circle.businessKeyword }}</view>
          <view class="circle-info">
            <view class="info-left">
              <image class="location-icon" src="/static/icon/address_icon.png" mode="aspectFit"></image>
              <text class="location-text">{{ circle.district }}</text>
            </view>
            <view class="info-right">
              <image v-if="circle.isLikeCount" class="like-icon" src="/static/icon/sc-f.png" mode="aspectFit" @click="handleLike(circle,0)"></image>
              <image v-else class="like-icon" src="/static/icon/sc.png" mode="aspectFit" @click="handleLike(circle,1)"></image>
              <text class="like-count">{{ circle.likeCount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue";
  import businessUtils from "@/common/businessUtils";
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
        // 吸顶效果
        isFixed: false,
        offsetTop: 0,
        categoryList: [{
          name: '推荐',
          isRecommend: 1
        },{
          name: '青秀区',
          category_id: '2165'
        },{
          name: '江南区',
          category_id: '2166'
        },{
          name: '西乡塘区',
          category_id: '2167'
        },{
          name: '良庆区',
          category_id: '2168'
        },{
          name: '邕宁区',
          category_id: '2169'
        },{
          name: '兴宁区',
          category_id: '2164'
        }],
        currentDistrictId:null,
        isRecommend:1, // 默认查推荐的

        thisindex: 0,
        openCategory: {
          color: "#000000",
          open: 0
        },
        searchtxt:null,
        business:{
          pageIndex: 1,
          pageSize:10,
          lastPage:1,
          list:[],
          noMore:false,
        },
        collectionCountList: {},
        likeCountList: {}



			};
		},
		computed: {

		},
		onShow() {

		},
    onLoad: function(options){

    },
		mounted() {
      this.init();
      this.likeCountList = businessUtils.getLikeCountList();
      this.getBusinessList();
		},

    onReachBottom() {
      let self = this;
      if (self.business.noMore) {
        return;
      }
      self.business.noMore = true;
      if (self.business.pageIndex < self.business.lastPage) {
        self.business.pageIndex++;
        self.getBusinessList();
      }else{
        self.business.noMore = true;
      }

    },

    // 推荐分类菜单吸顶
    onPageScroll(e) {
      // 获取滚动的位置
      const scrollTop = e.scrollTop;
      // console.log("scrollTop",scrollTop,uni.getSystemInfoSync().windowHeight -400);
      // 判断滚动位置是否超过手机屏幕的高度
      if (scrollTop >= (uni.getSystemInfoSync().windowHeight - 620)) {
        // 将菜单添加固定定位样式，使其吸附在顶部
        // 使用uni.$b调用组件，注意选择器的命名可能会有不同
        this.isFixed = true;
      } else {
        // 移除固定定位样式
        this.isFixed = false;
      }
    },

    onShareAppMessage:function(){
      let sid = '';
      /* if(this.userInfo.userUuid){
         sid = this.userInfo.userUuid;
       }*/
      console.log("分享用户ID: "+sid);
      return {
        title: '同城好街，逛街不走冤枉路，与你分享!',
        path: '/pages/index/index?sid='+sid,
        success(res) {
          uni.showToast({
            title: '分享成功',
          })
        },
        fail(res) {
          uni.showToast({
            title: '分享失败',
            icon: 'none',
          })
        },
      }
    },

    onShareTimeline:function(){
      let sid = '';
      return {
        title: '同城好街，逛街不走冤枉路，与你分享!',
        path: '/pages/index/index?sid=' + sid,
        success(res) {
          uni.showToast({
            title: '分享成功',
          })
        },
        fail(res) {
          uni.showToast({
            title: '分享失败',
            icon: 'none',
          })
        },
      }
    },

		methods: {

      init() {
        let self = this;
        uni.getSystemInfo({
          success(res) {
            self.phoneHeight = res.windowHeight;
            // 计算组件的高度
            let view = uni.createSelectorQuery().in(self).select('.top-box');
            view.boundingClientRect(data => {
              console.log(data)
              let h = self.phoneHeight - data.height;
              self.scrollviewHigh = h;
            }).exec();
          }
        });
      },

      navToPage(row) {
        uni.navigateTo({
          url: '/pages/shop/business_shopList?shopBusinessId=' + row.businessId,
        });
      },

      //点击nav控制下面的展示
      setIndex(e) {
        this.thisindex = e;
        if (this.categoryList[e].category_id) {
          this.currentDistrictId = this.categoryList[e].category_id;
        } else {
          this.currentDistrictId = null;
        }
        if (this.categoryList[e].isRecommend) {
          this.isRecommend = this.categoryList[e].isRecommend;
        } else {
          this.isRecommend = null;
        }

        this.business.list = [];
        this.business.pageIndex = 1;
        this.business.noMore = false;
        this.getBusinessList();
      },

      searchBusinessList(){
        let self = this;
        self.business = {
          pageIndex: 1,
              pageSize:10,
              lastPage:1,
              list:[],
              noMore:false,
        };
        this.getBusinessList()
      },

      getBusinessList(){
        let self = this;
        let pageIndex = self.business.pageIndex;
        let pageSize = self.business.pageSize;
        self.loading = true;
        self._postBody('business/business/list', {
          pageIndex: pageIndex || 1,
          pageSize: pageSize,
          districtId: self.currentDistrictId,
          isRecommend: self.isRecommend,
          businessName : self.searchtxt,
        }, (res) => {
          self.loading = false;
          self.business.lastPage = res.data.lastPage;
          res.data.records.forEach(item=>{
            if (self.likeCountList[businessUtils.likeCountKeyName+item.businessId] && self.likeCountList[businessUtils.likeCountKeyName+item.businessId] == 1){
              item.isLikeCount = true;
            }else{
              item.isLikeCount = false;
            }
          })
          self.business.list = self.business.list.concat(res.data.records);
          if (res.data.lastPage <= pageIndex) {
            self.business.noMore = true;
          } else {
            self.business.noMore = false;
          }
        })
      },
      //获取市区域
      getRegionPart(){
        let self = this;
        self._postBody('data/region/regionList', {
          pid: 2163
        }, (res) => {
          console.log("getRegionPart",res)
        })
      },

      handleLike(row, value) {
        let self = this;
        self._postBody('business/business/setLikeCount', {
          businessId: row.businessId,
          likeCount: value
        }, (res) => {
          if (value == 1) {
            row.likeCount++;
            row.isLikeCount = true;
            businessUtils.setLikeCount(row.businessId, 1);
            self.likeCountList[businessUtils.likeCountKeyName + row.businessId] = 1;
          } else {
            row.likeCount--;
            row.isLikeCount = false;
            businessUtils.setLikeCount(row.businessId, 0);
            self.likeCountList[businessUtils.likeCountKeyName + row.businessId] = 0;
          }
        })
      },

		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f2f2f2;
	}

  .business-circles-container {
    padding: 20rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .business-circle {
    flex: 0 0 calc(50% - 10upx);
    box-sizing: border-box;
    margin:20upx 0 20upx 0;
  }

  .swiper-container {
    width: 100%;
    height: 200px;
  }

  .business-swiper-image {
    width: 100%;
    height: 100%;
    border-radius: 16upx;
  }

  .circle-name {
    font-size: 28upx;
    font-weight: bold;
    margin-top: 20upx;
  }

  .circle-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }

  .info-left, .info-right {
    display: flex;
    align-items: center;
  }
  .city{
    display: inline-flex;
    justify-content: center;
    justify-items: center;
  }
  .location-icon, .like-icon {
    width: 34upx;
    height: 36upx;
    margin-right: 6upx;
    display: inline-flex;
  }

  .location-text, .like-count {
    font-size: 14px;
    display: inline-flex;
  }
  .tip{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
  }
</style>
